import { IData } from '../api/activity/activityregistration.api';

export default function Info(
	{
		no,
		data,
		onChange,
		onCancel,
	}: {
		no: number
		data: IData;
		onChange(id: string, v: string): void;
		onCancel(id: string): void
	}) {
	return <>
		<div className='v'>
			<div className='topv'>
				<div className='left'>
					<span className='num'>{no}</span>
				</div>
				<div className='right'>
					<div className='lblv'>
						<span className='lbl'>姓名：</span>
						<div className='inpv'>
							<input readOnly className='inp' value={data.name} type='text' />
						</div>
					</div>
					<div className='lblv'>
						<span className='lbl'>备注：</span>
						<div className='inpv'>
							<input className='inp' value={data.remark} type='text' onChange={(e) => {
								onChange(data.id, e.target.value);
							}} />
						</div>
					</div>
				</div>
			</div>
			<div className='btnv'>
				<input className='cancel' type='button' value='取消其报名' onClick={() => {
					onCancel(data.id);
				}} />
			</div>
		</div>
		<style jsx>{`
		.v{
display: flex;
flex-direction: column;
justify-content:center;
height:6.5rem;
border-color: #000000;
border-style: solid;
border-width: 0.0625rem;
 border-radius: 0.625rem;
margin: 0.5rem;
padding: 0.5rem 1rem 0rem 1rem;
}
	.topv{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.left{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 0;
background-color: #000000;
width: 1.5625rem;
 height: 1.5625rem;
 border-radius: 3.125rem;
}
.num{
color: #FFFFFF;
font-size: 1rem;
}
.right{
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
margin-left: 1rem;
}
.lblv{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-grow: 1;
}
.lbl{
font-size: 0.875rem;
color: #505D68;
text-shadow: 0rem 0.25rem 0.25rem rgba(0, 0, 0, 0.25);
}
.inpv{
display: flex;
flex-direction: row;
align-items: center;
margin: 0.2rem 0;
flex-grow: 1;
border-color: #D9D9D9;
border-width: 0.0625rem;
border-style: solid;
}
.inp{
flex-grow: 1;
border-style: none;
font-size: 0.875rem;
color: #000000; 
}
.btnv{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex-grow: 1;
}
.cancel{
background-color: #FFFFFF;
border-radius: 0.625rem;
color: #AF1C1C;
font-size: 0.875rem;
width: 6rem;
height: 1.5rem;
border-color: #AF1C1C;
border-width: 0.0625rem;
border-style: solid;
}
		`}</style>
	</>;
}
